<template>
  <el-col :span="24">
    <el-col :span="3" class="fileTree">
      <el-tree
        :data="deviceBasic.historyInfo"
        :props="defaultProps"
        accordion
        @node-click="handleNodeClick"
      >
      </el-tree>
    </el-col>
    <el-col :span="21" class="fileReview" v-if="docType != 'img'">
      <sticky v-if="pdfParams.pageTotalNum">
        <div class="tools">
          <el-button @click="prePage"> 上一页</el-button>
          <span class="page"
            >{{ pdfParams.pageNum }}/{{ pdfParams.pageTotalNum }}
          </span>
          <el-button @click="nextPage"> 下一页</el-button>

          <el-button
            class="download-btn"
            v-if="pdfParams.downloadUrl"
            @click="download"
            >下载文件</el-button
          >
        </div>
      </sticky>
      <!-- <img src="https://panjiachen.gitee.io/vue-element-admin/static/img/404.a57b6f31.png"> -->
      <pdf
        ref="pdf"
        :src="pdfParams.url"
        :page="pdfParams.pageNum"
        :rotate="pdfParams.pageRotate"
        @progress="pdfParams.loadedRatio = $event"
        @page-loaded="pageLoaded($event)"
        @num-pages="pdfParams.pageTotalNum = $event"
        @error="pdfError($event)"
        @link-clicked="page = $event"
      ></pdf>
    </el-col>
    <el-col :span="21" class="fileReview" v-if="docType == 'img'">
      <el-button
        class="download-btn"
        :style="{ display: 'block' }"
        v-if="pdfParams.downloadUrl"
        @click="download"
        >下载文件</el-button
      >

      <img :src="pdfParams.url" />
    </el-col>
  </el-col>
</template>


<script>
import pdf from "vue-pdf";
import Sticky from "vue-sticky-position";
import { mapState, mapMutations } from "vuex";
import { downloadFile } from "@/utils/download.js";

export default {
  props: ["dataModel"],
  components: { pdf, Sticky },
  data() {
    return {
      docType: "pdf",
      pdfParams: {
        pageNum: 1,
        url: "",
        numPages: 1,
        pageTotalNum: 1,
        pageRotate: 0,
        // 加载进度
        loadedRatio: 0,
        curPageNum: 0,
      },

      data: this.dataModel.histroyShowInfo,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created: async function () {
    const dataKey = this.$route.fullPath;
    const id = localStorage.getItem(dataKey);

    await this.$store.dispatch("deviceBasic/historyInfo", id);
  },
  mounted: function () {
    console.log(this.$store.state.deviceBasic);
    this.getNumPages(this.pdfParams.url);
  },
  computed: {
    ...mapState(["deviceBasic"]),
  },
  methods: {
    download() {
      downloadFile(this.pdfParams.downloadUrl);
    },
    //获取分页总数
    async getNumPages(url) {
      var loadingTask = await pdf.createLoadingTask(url);

      loadingTask
        .then((pdf) => {
          this.pdfParams.url = loadingTask;
          this.pdfParams.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
    },
    // 上一页函数，
    prePage() {
      var page = this.pdfParams.pageNum;
      page = page > 1 ? page - 1 : this.pdfParams.pageTotalNum;
      this.pdfParams.pageNum = page;
    },
    // 下一页函数
    nextPage() {
      var page = this.pdfParams.pageNum;
      page = page < this.pdfParams.pageTotalNum ? page + 1 : 1;
      this.pdfParams.pageNum = page;
    },

    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.pdfParams.curPageNum = e;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error);
    },
    handleNodeClick(data) {
      console.log(data);
      if (data.children) {
        //父节点不处理
      } else {
        this.docType = data.type;
        this.pdfParams.url = data.imgSrc;
        this.pdfParams.pageNum = 1;
        this.pdfParams.downloadUrl = data.download;
      }
    },
  },
};
</script>
<style lang="scss">
.fileTree {
  height: 100%;
}
.fileReview {
  border: 5px solid #f5f6fa;
}
.tools {
  text-align: center;
  margin: 20px;
}
.download-btn {
  margin: 10px 0;
}
</style>